<template>
	<div class="buy">
		<div class="buy-one">
			<span @click="tiao"><</span>
			<span>购物车</span>
			<span></span>
		</div> 
		<div class="buy-list">
				
			<span>满99.00元免运费</span>
			<div class="buy-no" v-if="zw">
				 <svg class="icon buy-icon" aria-hidden="true">
				   <use xlink:href="#icon-huabanfuben" class='gouwu'></use>
				 </svg><br />
				 <b>购物车还没有商品哦~</b>
				 <router-link to="/"><div class="run">逛一逛</div></router-link>
			</div>
			<div class="buy-car" v-for="k in dui" :key="k.id">
			<span>
				<img :src="$base + '/' + k.img" />
			</span>
			<span>限时购</span>
			<span id="ti">{{k.title}}</span>
			<span>总计&nbsp;:${{k.num * k.price}}</span>
		</div>
		</div>
		<div class="buy-b">为你推荐</div>
		<div class="buy-box">
			<div class="buy-left">
				<img src="../../../data/images/024.png" />
				<span>限时购</span>
				<span>智能无风页风扇</span>
				<span>冷而无霜</span>
				<span>￥49</span>
			</div>	
			
			<div class="buy-left">
				<img src="../../../data/images/025.png" />
				<span>限时购</span>
				<span>水离子护发吹风机</span>
				<span>创新三层水润风 / 磁吸风嘴</span>
				<span>￥199</span>
			</div>	
			<div class="buy-left">
				<img src="../../../data/images/028.png" />
				<span>限时购</span>
				<span>燃气热水器</span>
				<span>13/16L,2级能效 / 恒温控水</span>
				<span>￥699</span>
			</div>	
			<div class="buy-left">
				<img src="../../../data/images/027.png" />
				<span>限时购</span>
				<span>LCD蒸汽熨斗</span>
				<span>爆炸蒸汽 / lcd显示屏</span>
				<span>￥299</span>
			</div>	
		</div>
		<div class="buy-footer">
			
			<b>合计</b>
			<b>￥{{zj}}</b>
			<b>结算 </b>
		</div>
	</div>
</template>
<script src="./iconfont.js"></script>
<script>

	export default{
		data(){
			return{
				
				dui:{},
				zj:0,
				zw : true
			}
		},
		methods:{
			tiao(){
				window.history.go(-1)
			}
		},
		mounted(){
			var op = JSON.parse(localStorage.getItem('buy'));
			function pan(op){
				for(var x in op){
					return true;
				}
				return false;
			}
			if(pan(op) == true){
				
				this.zw = false
			}
			this.dui = op;
			for(var i in op){
				this.zj += (op[i].price * op[i].num)
			}
		}
		
		}
</script>
 
<style lang="scss">
	#ti{
		font-size: 16px;
	}
	.el-checkbox__label{
		margin: 0;
		padding: 0;
	}
	.buy{
		text-align: center;
		overflow: auto;
		background: #f4f4f4;
	}
	.buy-one{
		position: fixed;
		z-index: 12;
		margin-bottom:1.85rem ;
		display: flex;
		justify-content: space-around;
	}
	.buy-list{
		width: 10.2rem;
		min-height: 8.4rem;
		border-radius: 0.2rem;
		background: #fff;
		margin-top: 1.8rem;
		margin-left: 0.3rem;
		position: relative;
		box-sizing: border-box;
		padding: 0.5rem 0 ;
	}
	.buy-b{
		font-weight: bold;
		font-size: 0.4rem;
		color: #333;
		margin-top: 0.95rem;
		border-left: 100px solid #74ebd5;
		border-right: 100px solid #e0c3fd;
	}
	.buy-box{
		width: 10.3rem;
		height: 18rem;
		margin-top: 0.6rem;
		margin-left: 0.2rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.buy-left{
			width: 5rem;
			height: 7.3rem;
			background: #fff;
			border-radius: 0.2rem;
			position: relative;
			img{
				width: 3rem;
				margin-top: 0.4rem;
			}
		}
	}
	.buy-left span:nth-child(2){
		display: block;
		width: 1.2rem;
		height: 0.44rem;
		background: #d86c6c;
		border-radius: 0.1rem;
		color: #fff;
		font-size: 0.3rem;
		position: absolute;
		top: 0.2rem;
		right: 0.2rem;
	}
	.buy-left span:nth-child(3){
		font-size: 0.46rem;
		position: absolute;
		left: 0.2rem;
		top: 4.3rem;
	}
	.buy-left span:nth-child(4){
		font-size: 0.35rem;
		position: absolute;
		left: 0.2rem;
		bottom: 1.8rem;
	}
	.buy-left span:nth-child(5){
		font-size: 0.5rem;
		color: #ac0e0f;
		position: absolute;
		left: 0.2rem;
		bottom: 0.4rem;
	}

	.buy-list span:nth-child(1){
		font-size: 0.28rem;
		color: #666;
		position: absolute;
		top: 0.5rem;
		right: 0.3rem;
	}
	.buy-car{
		width: 6.5rem;
		height: 3rem;
		position: relative;
		border-bottom: 1px solid #74ebd5;
		margin-top: 1rem;
		margin-left: 2rem;
	}
	.buy-car span:nth-child(1) {
		position: absolute;
		left: -2.8rem;
		img{
			width: 2.4rem;
			height: 2.4rem;
		}
	}
	.buy-car span:nth-child(2){
		display: block;
		width: 1.2rem;
		height: 0.44rem;
		background: #d86c6c;
		border-radius: 0.1rem;
		color: #fff;
		font-size: 0.3rem;
		position: absolute;
	}
	.buy-car span:nth-child(3){
		position: absolute;
		top: 0.4rem;
		font-size: 0.8rem;
	}
	.buy-car span:nth-child(4){
		position: absolute;
		top: 1.8rem;
		font-size: 0.6rem;
		color: #bf1112;
	}
	.buy-footer{
		width: 10.8rem;
		height: 1.5rem;
		border-top: 1px solid #d6d6d6;
		position: fixed;
		bottom: 0;
		background: #fff;
	}
	.footer-xuan{
		position: absolute;
		top: 0.4rem;
		left: 0.34rem;
		float: left;
	}
	.buy-footer b:nth-child(1){
		font-size: 0.34rem;
		color: #191919;
		position: absolute;
		left: 5.68rem;
		top: 0.6rem;
		font-weight: bold;
	}
	.buy-footer b:nth-child(2){
		font-size: 0.34rem;
		color: #191919;
		position: absolute;
		color: #bf1112;
		top: 0.6rem;
		left: 6.4rem;
	}
	.buy-footer b:nth-child(3){
		display: block;
		width: 2.6rem;
		height: 1rem;
		background: #bf1112;
		color: #fff;
		font-size: 0.4rem;
		text-align: center;
		line-height: 1rem;
		position: absolute;
		top: 0.2rem;
		right: 0.2rem;
		border-radius: 0.2rem;
	}
	.buy-icon {
		width: 2.5rem;
		height: 2.5rem;
		margin: 1.8rem 0 0.4rem -0.4rem;
	}
	b{
		font-size: 0.3rem;	
		font-weight: 100;
	}
	.run{
		width: 2.75rem;
		height: 0.94rem;
		border: 1px solid #a3d4ff;
		border-radius: 0.5rem;
		text-align: center;
		line-height: 0.94rem;
		margin-left: 4rem;
		margin-top: 0.46rem;
		color: #a3d4ff;
	}
</style>
